<template>
  <el-container style="height: 100vh;">
    <!-- 左侧导航栏 -->
    <Sidebar />
    <!-- 右侧内容区 -->
    <el-container>
      <!-- 顶部栏 -->
      <el-header height="60px" class="main-header">
        <div class="header-left">
          <Breadcrumb />
        </div>
        <div class="header-right">
          <UserMenu :user="currentUser"/>
        </div>
      </el-header>
      <!-- 主内容区 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Sidebar from '../components/Sidebar.vue'
import UserMenu from '../components/UserMenu.vue'
import Breadcrumb from '../components/Breadcrumb.vue'
import { computed } from 'vue'
import UserService from '../services/UserService.js'

const currentUser = computed(() => UserService.getCurrentUser())

</script>

<style>
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 0 24px;
}
.header-left {
  flex: 1;
}
.header-right {
  min-width: 200px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style> 